<template>
  <div class="a">秒杀商品</div>
  <span class="line1"></span>
  <el-tabs v-model="activeName" stretch="true" @tab-click="tabClick">
    <el-tab-pane
      v-for="(item, index) in titles"
      :key="index"
      :label="item.title"
      :name="item.tname"
      class="tabpane"
    >
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";

export default {
  props: {
    titles: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      activeName: "",
    });
    onMounted(() => {
      // 起始让标签在第一个选项卡上
      state.activeName = props.titles[0].tname;
    });
    const tabClick = (tab) => {
      emit("tabclick", tab.index);
    };
    return {
      ...toRefs(state),
      tabClick,
    };
  },
};
</script>

<style lang="scss" scoped>
.a {
  font-weight: 700;
  font-size: 22px;
  display: flex;
  padding-left: 20px;
  padding-top: 10px;
  width: 100%;
  height: 50px;
  background: rgba($color: #efefef, $alpha: 0.3);
}
el-tabs {
  width: 100%;
}
.line1 {
  width: 100%;
  height: 3px;
  background-color: #0765a9;
  flex-grow: 0.1;
}
</style>
